
.popup-coupon-content {
	font-size: 24rpx;

	&.page {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}

	.input {
		margin-top: 20rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;

		.popup-content-input {
			border-radius: 70rpx;
			background: #f7f8fa;
			padding: 0 20rpx;
			flex: 1;
			height: 70rpx;
			margin-right: 20rpx;
		}

		.text {
			color: #03ab91;
			font-size: 28rpx;
			opacity: 0.8;

			&.hasValue {
				opacity: 1;
			}
		}
	}

	.tab {
		display: flex;
		align-items: center;
		background: #fff;
		box-shadow: 0 12rpx 24rpx -24rpx #969799;

		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #646566;

			.tab-text {
				display: inline-block;
				padding: 20rpx 0;
			}
		}

		.active {
			color: #323233;

			.tab-text {
				border-bottom: 2px solid #03ab91;
			}
		}
	}

	.coupon-list::-webkit-scrollbar {
		display: none;
	}

	.coupon-list {
		margin-top: 4rpx;
		background: #f6F7F9;
		min-height: 340rpx;
		flex: 1;
		overflow-y: scroll;
		// .mock{
		// 	background-color: rgba(0,0,0,0.5);
		// 	z-index: 999;
		// 	position: absolute;
		// 	top: 0;
		// 	width: 100%;
		// 	height: 240rpx;
		// 	border-radius: 20rpx;
		// }
		.head{
			// position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.coupon-card {
			margin: 0rpx 20rpx 20rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 10rpx 20rpx 0 20rpx;

			.card-content {
				display: flex;
				margin: 30rpx 0;

				.amount-content {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 10rpx;
					width: 260rpx;

					&.available {
						color: #03ab91;
					}

					.amount {
						display: flex;
						align-items: center;

						.price {
							font-weight: 500;
							font-size: 54rpx;
							margin-right: 4rpx;
						}
					}

					.amount-text {
						margin-top: 4rpx;
					}
				}

				.coupon-info {
					flex: 1;
					color: #323233;
					margin-left: 20rpx;

					.info-name {
						font-size: 30rpx;
						font-weight: 500;
					}

					.info-time {
						margin-top: 20rpx;
					}
				}
			}

			.coupon-desc {
				border-top: 2rpx dashed #ebedf0;
				padding: 20rpx;
			}
		}

		.coupon-card:last-of-type {
			margin-bottom: 0;
		}

	}

	.button-cancel {
		margin: 20rpx;
		height: 80rpx;
		background: #03ab91;
		border-radius: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
	}
}

.head {
	.coupon_item {
		margin-bottom: 20rpx;
		width: 90%;
		height: 240rpx;
		background-image: url('@/static/image_bg_youhui_yes.png') !important;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		z-index: 99;

		.item_top {
			flex: 7;
			display: flex;

			.item_top_left {
				padding: 20rpx;
				padding-right: 0;
				flex: 7;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				.item_info {
					color: #FFF600;
					font-size: 20rpx;
				}

				.item_date {
					font-size: 28rpx;
					color: #fff;
					margin-top: 10rpx;
				}
			}

			.item_top_right {
				flex: 3;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFF600;


				text {
					padding: 12rpx 30rpx;
					border: 1rpx solid #FFF600;
					border-radius: 50rpx;
					font-size: 26rpx;
				}
			}
		}

		.item_bottom {
			padding: 0 20rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			flex: 3;
			color: #FF6411;
			justify-content: space-between;
		}
	}
}

.head2 {
	.coupon_item {
		margin-bottom: 20rpx;
		width: 100%;
		height: 240rpx;
		background-image: url('@/static/image_bg_youhui_no.jpg') !important;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;

		.item_top {
			flex: 7;
			display: flex;

			.item_top_left {
				padding: 20rpx;
				flex: 7;

				.item_info {
					color: #6b6b6b;
					font-size: 20rpx;
				}

				.item_date {
					font-size: 28rpx;
					color: #6b6b6b;
					margin-top: 10rpx;
				}
			}

			.item_top_right {
				display: none;
				flex: 3;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #6b6b6b;

				text {
					display: none;
					padding: 12rpx 30rpx;
					border: 1rpx solid #6b6b6b;
					border-radius: 50rpx;
					font-size: 26rpx;
				}
			}
		}

		.item_bottom {
			padding: 0 20rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			flex: 3;
			color: #6b6b6b;
		}
	}
}